<template>
  <div class="content_box">
    <div class="condition_search">
      <el-select v-model="queryList.businessId" placeholder="请选择机构" clearable filterable class="filter-item" style="width: 240px">
        <el-option label="全部机构" value="" />
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-input v-model="queryList.name" placeholder="请输入课程名字" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <el-select v-model="queryList.status" placeholder="请选择课程状态" clearable filterable class="filter-item" @change="handleFilter">
        <el-option label="待编辑" value="1" />
        <el-option label="待上架" value="2" />
        <el-option label="已上架" value="3" />
        <el-option label="已下架" value="4" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <div class="content_form">
      <el-table
        :data="classList"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :element-loading-text="g.loadingStr"
        :header-cell-style="{ background: g.mainColor }"
      >
        <el-table-column prop="businessName" label="所属机构" align="center" fixed />
        <el-table-column label="课程封面" align="center" fixed>
          <template slot-scope="{ row }">
            <img
              :src="row.introducePictures.split(',')[0]"
              style="width: 150px; object-fit: cover"
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" align="center" fixed />
        <el-table-column prop="categoryName" label="课程分类" align="center" fixed />
        <el-table-column label="课程状态" align="center" fixed>
          <template slot-scope="{ row }">
            <span>{{ row.status | courseType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseNatureName" label="课程类型" align="center" fixed />
        <el-table-column label="是否保障计划" align="center" fixed>
          <template slot-scope="{ row }">
            <span>{{ row.isSecurityPlan | isSecurityPlan }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed>
          <template slot-scope="{ row }">
            <el-button type="success" @click="handleEditSecurityPlan(row)">保障计划</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="编辑保障计划"
      :visible.sync="securityPlanDialog"
      width="1000px"
      @close="clearForm()"
    >
      <div class="isSec">
        <label style="width:120px">保障计划:  </label>
        <el-radio-group v-model="securityPlanForm.isSecurityPlan">
          <el-radio label="1">启用保障计划</el-radio>
          <el-radio label="0">取消保障计划</el-radio>
        </el-radio-group>
      </div>
      <div style="display:flex;">
        <label style="width:120px">保障计划内容:</label>
        <el-input v-model="securityPlanForm.securityPlan" disabled type="textarea" :autosize="{ minRows: 4, maxRows: 4}" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelShowDialog">取 消</el-button>
        <el-button type="primary" @click="submitPlan">确 定</el-button>
      </span>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryList.currentPage"
      :limit.sync="queryList.pageSize"
      @pagination="getClassList"
    />
  </div>
</template>

<script>
import { courseManagementList, upDateCourseSecuityStatus, getSingleCourseDetail, courseBusinessList } from '@/api/course'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      classList: [],
      businessList: [],
      queryList: {
        pageSize: 10,
        businessId: '',
        currentPage: 1,
        status: '',
        name: ''
      },
      total: 1,
      securityPlanDialog: false,
      securityPlanForm: {
        id: '',
        isSecurityPlan: '',
        securityPlan: '“保障计划”是家巴啦平台联合第三方担保机构，对购买本课程的消费者提供的课程保障计划；带“保障计划”标贴的课程均为教培机构与平台合作的优质课程，请家长放心购买'
      }
    }
  },
  mounted() {
    this.getClassList()
    this.getbusinessList()
  },
  methods: {
    handleFilter() {
      this.queryList.currentPage = 1
      this.getClassList()
    },
    getClassList() {
      courseManagementList(this.queryList).then(classListResponse => {
        const { records, total } = classListResponse.data
        this.total = total
        this.classList = records
      })
    },
    getbusinessList() {
      courseBusinessList().then(res => {
        this.businessList = res.data
      })
    },
    handleEditSecurityPlan({ id }) {
      this.securityPlanDialog = true
      getSingleCourseDetail({ id }).then(response => {
        const { data } = response
        this.securityPlanForm.id = id
        this.securityPlanForm.isSecurityPlan = data.isSecurityPlan + ''
        // this.securityPlanForm.securityPlan = data.securityPlan ? data.securityPlan : ''
        // console.log(this.securityPlanForm.securityPlan)
      })
    },
    submitPlan() {
      this.securityPlanForm.isSecurityPlan = +this.securityPlanForm.isSecurityPlan
      upDateCourseSecuityStatus(this.securityPlanForm).then(response => {
        if (response.code === '200') {
          this.$message.success('修改成功')
          this.securityPlanDialog = false
          this.getClassList()
        }
      })
    },
    cancelShowDialog() {
      this.securityPlanDialog = false
      this.clearForm()
    },
    clearForm() {
      this.securityPlanForm.id = ''
      this.securityPlanForm.isSecurityPlan = ''
      // this.securityPlanForm.securityPlan = ''
    }
  }
}
</script>

<style scoped lang='scss'>
.content_box {
  padding: 15px;
  .condition_search {
    margin-bottom: 15px;
  }
  .isSec {
    margin-bottom: 30px;
    label {
      margin-right: 30px;
    }
  }
}
</style>
